<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
    <link href="${pageContext.request.contextPath}/layui/css/layui.css"  media="all" rel="stylesheet" type="text/css" />
    <link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet" type="text/css" />
    <script type=javascript src="${pageContext.request.contextPath}/layui/jquery2.1.1.js" ></script>
    <script type=javascript src="${pageContext.request.contextPath}/layui/lay/modules/table.js" ></script>
    <script type=javascript src="${pageContext.request.contextPath}/layui/lay/modules/form.js" ></script>
    <script type=javascript src="${pageContext.request.contextPath}/layui/lay/modules/layer.js" ></script>
    <script type=javascript src="${pageContext.request.contextPath}/layui/lay/modules/laydate.js" ></script>
    <style>
        .layui-table-cell,.layui-table-box ,.layui-table-body{
            overflow: visible !important;
        }
        td .layui-form-select {
            margin-top: -10px;
            margin-left: -15px;
            margin-right: -15px;
        }
        td .input{
            width: 115px;
            height: 39px;
            margin-top: -9px;
            margin-left: -14px;
        }
        .layui-form-item i{
            display: block;
            margin-top: 10px;
        }
    </style>
</head>

<body>
<div class="place">
    <span>位置：</span>
    <ul class="placeul">
        <li>营销管理</li>
        <li>订购单管理</li>
        <li>订购单详情</li>
    </ul>
</div>

<form class="layui-form" lay-filter="detail">
    <div class="formtitle"><span>订购单信息</span></div>
    <div class="layui-form-item">
        <label class="layui-form-label">订单编号</label>
        <div class="layui-input-inline" >
            <input name="orderNum" id="orderNum" type="text"  readonly="readonly" class="layui-input" />
        </div>
        <div class="layui-input-inline" >
            <i>自动生成不能编辑</i>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">客户姓名</label>
        <div class="layui-input-inline" >
            <input name="name" id="name" type="text" class="layui-input" />
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">联系电话</label>
        <div class="layui-input-inline" >
            <input name="tel" id="tel" type="text" class="layui-input" />
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">订购时间</label>
        <div class="layui-input-inline" >
            <input name="orderTime" id="orderTime" type="text" readonly="readonly" class="layui-input" />
        </div>
        <div class="layui-input-inline" >
            <i>不能编辑</i>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">创建人</label>
        <div class="layui-input-inline" >
            <input name="creater" id="creater" type="text"  readonly class="layui-input" />
        </div>
        <div class="layui-input-inline" >
            <i>不能编辑</i>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">审核状态</label>
        <div class="layui-input-inline" >
            <select name="status" id="status" lay-verify="required" disabled>
                <option value="">请选择</option>
                <option value="1">未审核</option>
                <option value="2">审核中</option>
                <option value="3">审核通过</option>
                <option value="4">审核未通过</option>
            </select>
        </div>
        <div class="layui-input-inline" >
            <i>初始状态，不能编辑</i>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">总金额</label>
        <div class="layui-input-inline" >
            <input name="totalAmount" id="totalAmount"  type="text" readonly="readonly" class="layui-input" />
        </div>
        <div class="layui-input-inline" >
            <i>自动运算，不能编辑</i>
        </div>
    </div>

    <table id="demo" lay-filter="demo"></table>

    <script type="text/html" id="_brand" >
        <select name="brand" id="brand"  >
            <option value="未开工">请选择</option>
            <option value="在建">1</option>
        </select>
    </script>
    <script type="text/html" id="_type" >
        <select name="type" id="type"  >
            <option value="未开工">请选择</option>
            <option value="在建">1</option>
        </select>
    </script>
    <script type="text/html" id="_model" >
        <select name="model" id="model" >
            <option value="未开工">请选择</option>
            <option value="在建">1</option>
        </select>
    </script>
    <script type="text/html" id="_amount" >
        <input type="text" id="amount" name="amount" autocomplete="off" class="layui-input input" >
    </script>
    <script type="text/html" id="_unit" >
        <input type="text" id="unit" name="unit" autocomplete="off" class="layui-input input" >
    </script>
    <script type="text/html" id="_money" >
        <input type="text" id="money" name="money" autocomplete="off" class="layui-input input" >
    </script>
    <script type="text/html" id="_totalMoney" >
        <input type="text" id="totalMoney" name="totalMoney" autocomplete="off" class="layui-input input" readonly>
    </script>

    <script type="text/html" id="toolbarDemo" >
        <div class="layui-btn-container">
            <button type="button" class="layui-btn btn-add" lay-event="add">新增</button>
            <button type="button" class="layui-btn btn-add" lay-event="del">删除</button>
            <button lay-submit lay-filter="formDemo" class="layui-btn btn-add">保存</button>
        </div>
    </script>
</form>

<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
<script>
    layui.use(['table', 'form'], function () {
        var table = layui.table,
            form = layui.form,
            $ = layui.$;
        form.render();

        $(function () {
            $('#totalAmount').val("0");
            $("#orderTime").val($("#orderTime").val().replaceAll("/","-"));
        })
        $('#totalAmount').focus(function () {
            $('#totalMoney').val($('#amount').val()*$('#money').val());
            $('#totalAmount').val(parseInt($('#totalAmount').val())+parseInt($('#totalMoney').val()));
        })
        var statelist = {state: "1", lsh: "66", name: "66"};//存储码表数据，用于表格回调
        //动态获取码表数据
        $.ajax({
            type: "post",
            url: "state",
            dataType: "json",
            async: false,
            success: function (data) {
                statelist = data.list;
            }
        });
        //监听提交
        form.on('submit(formDemo)', function(data){
            data.field.orderTime = data.field.orderTime.replaceAll("/","-");
            console.log(data.field)
            $.ajax({
                url: "/order/addOrder",
                data: JSON.stringify(data.field),
                type: 'post',
                dataType: 'json',
                contentType:"application/json",
                success: function (resp) {
                    layer.msg(resp.message, {icon: 6});
                },
                error: function () {
                    layer.closeAll();
                    layer.msg('系统错误，请联系管理员', {icon: 5});
                }
            });
            $(function (){
                layer.closeAll();
                table.reload('demo', {
                    where: {},
                    data:[]
                });
            });
        });

        //展示已知数据
        table.render({
            elem: '#demo'
            , title: '手动添加删除行'
            , toolbar: '#toolbarDemo'//开启头部
            , defaultToolbar:false
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'center'}
                , {field: 'id', title: '序号', width: 114,align: "center"}
                , {field: 'brand', title: '品牌', width: 115, templet: '#_brand', align: "center"}
                , {field: 'type', title: '类型', width: 115, templet: '#_type', align: "center"}
                , {field: 'model', title: '型号', width: 115, templet: '#_model', align: "center"}
                , {field: 'amount', title: '数量', width: 116, templet: '#_amount', align: "center"}
                , {field: 'unit', title: '单位', width: 116, templet: '#_unit', align: "center"}
                , {field: 'money', title: '单价', width: 116, templet: '#_money', align: "center"}
                , {field: 'totalMoney', title: '金额', width: 116, templet: '#_totalMoney', align: "center"}
            ]]
            //这里就是一开始渲染就添加一个空的一行数据，或者添加一下数据也可以
            , data: []
            , done: function (res, curr, count) {
                // //添加下拉菜单数据
                // for (var k in lcztlist) {
                //     $("select[name='state']").append('' + statelist[k].label + '');
                // }
                // //根据已有的值回填下拉框
                // layui.each($("select[name='state']"), function (index, item) {
                //     var elem = $(item);
                //     elem.val(elem.data('value'));
                // });
                // //渲染select
                form.render('select');
            }
        });
        //头部工具栏事件
        table.on('toolbar(demo)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data //获取选中的数据
                , demo = table.cache["demo"];//获取表格中的数据
            switch (obj.event) {
                case 'add':
                    //添加时的字段信息
                    var datas = {};
                    //加入数组中
                    demo.push(datas);
                    //重载表格
                    table.reload('demo', {
                        data: demo
                    });
                    break;
                case 'del':
                    if (data.length === 0) {
                        layer.msg('请选中一行或多行数据');
                    } else {
                        var tablelist = [];//存储未选中的数据
                        //循环表格数据
                        for (var i in demo) {
                            //判断未选中数据
                            if (!demo[i].LAY_CHECKED) {
                                //存入数组
                                tablelist.push(demo[i]);
                            }
                        }
                        //重载表格
                        table.reload('demo', {
                            data: tablelist
                        });
                    }
                    break;
            }
        });
        //监听下拉框改变
        form.on('select(lczt)', function (data) {
            var selectElem = $(data.elem);
            var tdElem = selectElem.closest("td");
            var trElem = tdElem.closest("tr");
            var tableView = trElem.closest(".layui-table-view");
            table.cache[tableView.attr("lay-id")][trElem.data("index")][tdElem.data("field")] = data.value;
        });
    });
</script>
</body>
</html>
